/**
 * @name Tooltip
 * @description 仿Element table超出隐藏展示标签
 */

import React, { Component } from "react";
import { Title } from "@/component";
import $ from "jquery";

import iconUserCenter from "@/assets/img/iconUserCenter.png";
import iconExit from "@/assets/img/iconExit.png";

import styles from "./styles.module.less";
const listContent = [
  "12132132004564654654544654654564654654654",
  "12132132010000000000055555555555555555555500000000",
  "1213213202",
  "1213213202",
  "1213213202"
];
class Tooltip extends Component {
  state = {
    tops: 0,
    innerTexts: "",
    show: false,
    visibles: false
  };
  /**
   * @name enter
   * @param {Number} index 下标
   * @description 鼠标移入
   */
  enter = (index) => {
    let list = $("div[name='nowarp']");
    let tops = index * list[index].offsetHeight + 15;
    console.log("tops==", tops);
    if (list[index].offsetWidth < list[index].scrollWidth) {
      this.setState({ tops, innerTexts: list[index].innerText, show: true });
    }
  };
  /**
   * @name leave
   * @description 鼠标移出
   */
  leave = () => {
    this.setState({ show: false });
  };
  setVisible = () => {
    this.setState({ visibles: !this.state.visibles });
  };
  render() {
    const { tops, innerTexts, show, visibles } = this.state;
    return (
      <div>
        <div className={styles.block}>
          <Title text="仿Element table超出隐藏展示标签" />
          <div className={styles.container}>
            <div id="content">
              {listContent.map((item, index) => (
                <div name="nowarp" className={styles.nowarp} key={index} onMouseEnter={() => this.enter(index)} onMouseLeave={() => this.leave(index)}>
                  {item}
                </div>
              ))}
            </div>
            {show && (
              <div id="tooltip">
                <div className={styles.show} style={{ top: tops }}>
                  {innerTexts}
                </div>
              </div>
            )}
          </div>
        </div>
        <div className={styles.block}>
          <Title text="div标签失焦关闭" />
          <div>hidefocus:为了在IE中生效；tabIndex：是让div失焦生效</div>
          <div className={styles.container}>
            <div
              tabIndex="0"
              hidefocus="true"
              className={styles.user}
              onClick={() => this.setVisible()}
              onBlur={() => {
                this.setState({ visibles: false });
              }}
            >
              <span className={styles.name}>user</span>
              <UserPosition visibles={visibles} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
const UserPosition = (props) => {
  const { visibles } = props;
  return (
    <div className={visibles ? styles.handle_body_show : styles.handle_body_hid}>
      <div className={styles.handle_body_center}>
        <img src={iconUserCenter} alt="" className={styles.handle_body_icon} /> 个人中心<span>&gt;</span>
      </div>
      <div className={styles.handle_body_exit}>
        <img src={iconExit} alt="" className={styles.handle_body_icon} />
        退出登录
      </div>
    </div>
  );
};

export default Tooltip;
